<template>
	<view class="content d-flex flex-row a-center j-center px-1">
		<view class="d-flex cover a-center j-center flex-shrink">
			<image class="d-flex image rounded10 ml-1" :src="videoData.cover" mode="scaleToFill"></image>
		</view>
		<view class="d-flex textMain flex-column j-sb flex-1 px-2">
			<text class="ellipsis text-white font-md2 mb" style="width: 320rpx;">{{videoData.name}}</text>
			<text class="ellipsis text-white font-sm3" style="width: 320rpx;">上次看到第{{videoData.playlet_number}}集</text>
		</view>
		<view class="d-flex flex-shrink rechargeBtn a-center j-center bg-gradual-orange-n rounded80" @tap.stop="clickToSelf">
			<text class="d-flex text-white font-sm3">继续观看</text>
		</view>
		<view class="d-flex flex-shrink a-center j-center" style="width: 60rpx;height: 60rpx;" @tap.stop="clickToClose">
			<text class="d-flex iconfont icon-guanbi2 text-white font-weight font-md"></text>
		</view>
	</view>
</template>

<script>
	import tools from '@/utils/tools.js'
	export default {
		props: {
			videoData: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		methods: {
			clickToSelf() {
				console.log(32)
				// if (Object.keys(this.videoData).length > 0) {
				// 	let data = {playlet_id:this.videoData.video_info.playlet_id,
				// 	            name:this.videoData.video_info.name, 
				// 				playlet_number:this.videoData.video_info.playlet_number,
				// 		        last_episode_number:this.videoData.video_info.last_episode_number}
				// 	tools.jump_video_page_by_info(data)
				// }
				console.log(38,this.videoData)
				console.log(39,typeof this.videoData=='object',this.videoData!=null)
				if(typeof this.videoData=='object'&& this.videoData!=null){
					uni.navigateTo({
						url: '/pages/videopage/videopage?video_info='+encodeURIComponent(JSON.stringify(this.videoData))
					})
				}
			},
			clickToClose(){
				this.$emit('closeLastVideo');
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 720rpx;
		height: 128rpx;
		border-radius: 6rpx;
		background-color: rgba(0, 0, 0, 0.4);
		.cover{
			display: flex;
			width: 80rpx;
			height: 100rpx;
			.image{
				width: 80rpx;
				height: 100rpx;
			}
		}
		.textMain{
		}
		.rechargeBtn{
			width:84px;
			height:74rpx;
			margin:0px 20rpx 0px 0px;
		}
		.continueLook{
			width: 100%;
			height: 40rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #ffffff;
			font-size: 12px;
			text-align: center;
		}
		
	}
</style>